﻿<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Index</title>
    <script type="text/javascript" src="../../Scripts/jquery-1.4.4.js"></script>
    <script type="text/javascript" src="../../Scripts/jQXB.1.1.js"></script>
    <script type="text/javascript" src="../../Scripts/jQXBmsgtopic.js"></script>
</head>
<body>
    <div>
        <h2>Dynamic Widget , Composite Pattern and Messaging</h2>
        <h3>"Select" link sends a "msg_cust_selected". Try the link now and after loading "Cust Details" and/or "Cust Extended Detail"</h3>
    </div>
    <div>
        <div id="listPanel" style="float: left;">
        	<div>
				Updated: <span jqxb-datasource="objectDataSource" jqxb-datamember="Name" jqxb-bindedattribute="html">[No Update]</span>
			</div>
            <% Html.RenderPartial("Index_CustomerList"); %>
            <input type="button" value="Load Cust Details" onclick="MainPage.loadCustDetailPanel(false);" />
            <input type="button" value="Load Cust Extended Details" onclick="MainPage.loadCustDetailPanel(true);" />
        </div>
        <div id="custDetailsPanelExt" style="float: left;">
        </div>
    </div>
</body>
<script type="text/javascript">
    var MainPage = {}
    MainPage.loadCustDetailPanel = function (bextended) {
        jQXBM.fireMessage(jQXBtopics.MSG_PREPARELOADING);
        jQuery('#custDetailsPanelExt').load('custDetailsPanelExt', { extended: bextended });
    }
    MainPage.displayUpdatedData = function (Customer) {
        jQXB.setDataSource("objectDataSource", Customer).doBind("objectDataSource");
    }
    jQuery(document).ready(function () {
        jQXB.initialize();
        jQuery('#CustomerList').load('Index_Customerlist.html');
        jQXBM.subscribeMessage(jQXBtopics.MSG_CUSTOMER_UPDATED, MainPage.displayUpdatedData);

    });


</script>
</html>
